<template>
  <div class="meeting-assistant">
    <el-card class="main-card">
      <div class="header-row">
        <img src="@/assets/ai-avatar.png" class="ai-avatar" />
        <div>
          <h1 class="main-title">智能会议助手</h1>
          <div class="main-desc">高效组织 · 智能纪要 · 快速生成</div>
        </div>
      </div>
      <el-divider content-position="left"
        ><i class="el-icon-edit"></i> 会前准备</el-divider
      >
      <section class="section-block">
        <el-form :inline="true" :model="form" class="meeting-form">
          <el-form-item label="会议议题">
            <el-input
              v-model="form.topic"
              placeholder="请输入会议议题"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="参与人">
            <el-input
              v-model="form.participants"
              placeholder="用逗号分隔多个姓名"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="fetchRelatedDocs"
              :loading="relatedDocsLoading"
              >智能推荐资料</el-button
            >
            <el-select
              v-model="selectedModel"
              size="mini"
              style="width: 140px; margin-left: 12px; vertical-align: middle;"
            >
              <el-option label="硅基流动AI" value="liudong"></el-option>
              <el-option label="ollma" value="ollma"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-card
          v-if="relatedDocs && relatedDocs.length"
          class="related-docs-card"
        >
          <div class="card-title">
            <i class="el-icon-document"></i> 推荐资料
            <el-button
              type="text"
              icon="el-icon-document-copy"
              size="mini"
              @click="copyRelatedDocs"
              style="float: right; margin-left: 8px;"
              title="复制"
            ></el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              size="mini"
              @click="clearRelatedDocs"
              style="float: right;"
              title="删除"
            ></el-button>
          </div>
          <div style="white-space: pre-line">{{ relatedDocs }}</div>
        </el-card>
        <el-empty v-else description="暂无推荐资料" style="margin: 10px 0" />
      </section>
      <el-divider content-position="left"
        ><i class="el-icon-notebook-2"></i> 会议纪要辅助</el-divider
      >
      <section class="section-block">
        <div class="btn-row">
          <el-button
            type="primary"
            icon="el-icon-upload"
            @click="triggerFileInput"
            >导入会议文本</el-button
          >
          <el-button
            type="success"
            icon="el-icon-magic-stick"
            @click="generateSummary"
            :loading="summaryLoading"
            >生成摘要</el-button
          >
        </div>
        <input
          ref="fileInput"
          type="file"
          accept=".txt"
          @change="onFileChange"
          style="display: none"
        />
        <el-input
          type="textarea"
          v-model="meetingText"
          :rows="8"
          placeholder="输入或粘贴会议内容"
          class="meeting-textarea"
        />
        <div class="summary-views-row">
          <el-card class="summary-card">
            <div class="card-title">
              <i class="el-icon-tickets"></i> 会议摘要
              <span class="card-tip">(可编辑)</span>
            </div>
            <el-input
              v-model="summary"
              type="textarea"
              :rows="8"
              placeholder="暂无摘要，请点击生成"
            />
            <el-button
              v-if="summary"
              type="danger"
              size="mini"
              @click="summary = ''"
              style="margin-top: 5px"
              >删除摘要</el-button
            >
          </el-card>
        </div>
      </section>
    </el-card>
  </div>
</template>

<script>
import { generateAnswerWithRetry } from "@/api/ollama";
import { getCompletion } from "@/api/ai";
import axios from "axios";
export default {
  data() {
    return {
      form: {
        topic: "",
        participants: "",
      },
      relatedDocs: [],
      meetingText: "",
      summary: "",
      saveMsg: "",
      relatedDocsLoading: false,
      summaryLoading: false,
      selectedModel: "liudong", // 新增，默认模型
    };
  },
  methods: {
    cleanContent(content) {
      if (typeof content !== "string") return "";
      content = content.replace(/<think>[\s\S]*?<\/think>/g, "");
      content = content.replace(/^[\s]*[-*][\s]?/gm, "");
      return content
        .split("\n")
        .map((line) => line.trim())
        .filter((line) => line)
        .join("\n");
    },
    extractContent(res) {
      let content = "";
      if (res.data && typeof res.data === "string") {
        content = res.data;
      } else if (res.result && typeof res.result === "string") {
        content = res.result;
      } else if (
        res.result &&
        res.result.output &&
        typeof res.result.output.content === "string"
      ) {
        content = res.result.output.content;
      } else if (typeof res === "string") {
        content = res;
      }
      return this.cleanContent(content);
    },
    async fetchRelatedDocs() {
      if (!this.form.topic.trim() || !this.form.participants.trim()) {
        this.$message.warning("请先输入会议议题和参与人");
        return;
      }
      this.relatedDocsLoading = true;
      try {
        const prompt = `请根据会议议题“${this.form.topic}”和参与人“${this.form.participants}”，在知识库中检索相关背景资料、历史文档或项目更新，简要整理成要点列表。`;
        let res;
        if (this.selectedModel === "ollma") {
          res = await generateAnswerWithRetry("deepseek-r1:1.5b", prompt);
        } else {
          res = await getCompletion({
            model: "Qwen/Qwen2.5-7B-Instruct",
            message: prompt
          });
        }
        const content = this.extractContent(res);
        this.relatedDocs = content;
      } finally {
        this.relatedDocsLoading = false;
      }
    },
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    onFileChange(e) {
      const file = e.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = (evt) => {
        this.meetingText = evt.target.result;
      };
      reader.readAsText(file);
    },
    async generateSummary() {
      if (!this.meetingText || !this.meetingText.trim()) {
        this.$message.warning("请先输入或导入会议内容");
        return;
      }
      this.summaryLoading = true;
      try {
        const prompt = `请帮我总结以下会议内容，提炼核心讨论内容和关键决策点：${this.meetingText}`;
        let res;
        if (this.selectedModel === "ollma") {
          res = await generateAnswerWithRetry("deepseek-r1:1.5b", prompt);
        } else {
          res = await getCompletion({
            model: "Qwen/Qwen2.5-7B-Instruct",
            message: prompt
          });
        }
        this.summary = this.extractContent(res);
      } finally {
        this.summaryLoading = false;
      }
    },
    clearRelatedDocs() {
      this.relatedDocs = '';
    },
    copyRelatedDocs() {
      let text = Array.isArray(this.relatedDocs) ? this.relatedDocs.join('\n') : this.relatedDocs;
      if (!text) return;
      if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
          this.$message.success("复制成功");
        });
      } else {
        const textarea = document.createElement("textarea");
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand("copy");
        document.body.removeChild(textarea);
        this.$message.success("复制成功");
      }
    },
  },
};
</script>

<style scoped>
.meeting-assistant {
  background: #f6f8fa;
  min-height: 100vh;
  padding: 16px 0;
}
.main-card {
  width: 98vw;
  max-width: 1400px;
  min-width: 320px;
  margin: 0 auto;
  box-shadow: 0 4px 24px 0 #e6e8f0;
  border-radius: 18px;
  padding: 24px 3vw 20px 3vw;
  background: #fff;
}
.header-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 10px;
}
.ai-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 2px 8px #e0e0e0;
  background: #f5f7fa;
}
.main-title {
  font-size: 2.1rem;
  font-weight: 700;
  margin-bottom: 2px;
  color: #2d3a4b;
}
.main-desc {
  color: #7a8599;
  font-size: 1.1rem;
  margin-bottom: 0;
}
.section-block {
  margin-bottom: 32px;
}
.meeting-form {
  margin-bottom: 10px;
}
.related-docs-card {
  background: #f9fafc;
  border: 1px solid #e6e8f0;
  border-radius: 10px;
  margin-top: 8px;
  margin-bottom: 0;
}
.card-title {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-tip {
  color: #999;
  font-size: 12px;
  margin-left: 8px;
}
.doc-tag {
  margin: 3px 5px 3px 0;
}
.btn-row {
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.meeting-textarea {
  margin: 10px 0 0 0;
  width: 100%;
  border-radius: 8px;
  background: #f7f9fa;
}
.summary-views-row {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.summary-card,
.speaker-views-card {
  flex: 1 1 350px;
  min-width: 320px;
  background: #fcfcfd;
  border: 1px solid #e6e8f0;
  border-radius: 10px;
}
.speaker-view-row {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 1200px) {
  .main-card {
    padding: 16px 1vw 12px 1vw;
  }
}
@media (max-width: 900px) {
  .main-card {
    width: 100vw;
    padding: 8px 0 6px 0;
    min-width: 0;
  }
  .summary-views-row {
    flex-direction: column;
    gap: 10px;
  }
}
</style>